<template>
    <div class="settings-user-info">
        <div class="user-info-list-part">
            <el-form :ref="this.formName" class="user-info-form" :model="userInfo" label-width="80px">
                <el-form-item label="用户id">
                    <el-tag v-text="userInfo.id"></el-tag>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-tag v-text="userInfo.userName"></el-tag>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-tag v-text="userInfo.email"></el-tag>
                </el-form-item>
                <el-form-item label="角色">
                    <el-tag v-text="userInfo.roles"></el-tag>
                </el-form-item>
                <el-form-item label="头像">
                    <el-avatar :src="userInfo.avatar" style="margin-right: 20px"></el-avatar>
                    <el-button type="primary" size="small" @click="toggleShow">修改头像</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="upload-avatar-dialog">
            <my-upload field="file"
                       @crop-success="cropSuccess"
                       @crop-upload-success="cropUploadSuccess"
                       @crop-upload-fail="cropUploadFail"
                       v-model="show"
                       :width="300"
                       :height="300"
                       url="/admin/image"
                       :params="params"
                       :headers="headers"
                       img-format="png">
                <img :src="imgDataUrl">
            </my-upload>
        </div>
    </div>
</template>

<script>
import {getOwnInfo, putUser} from "@/api/userApi";
import {success_code} from "@/utils/ResponseState";
import myUpload from 'vue-image-crop-upload';

export default {
    name: "manage-user",
    data() {
        return {
            formName: "user-info-form",
            userInfo: {
                id: '',
                userName: '',
                password: '',
                email: '',
                avatar: '',
                roles: '',
                sign: '',
                order: 1,
                state: '1'
            },
            show: false,
            params: {
                token: '123456798',
                name: 'avatar'
            },
            headers: {
                smail: '*_~'
            },
            imgDataUrl: '' // the date base 64 url of created image
        }
    },
    components: {
        'my-upload': myUpload
    },
    methods: {
        getOwnInfo() {
            getOwnInfo().then(result => {
                if (result.code === success_code) {
                    this.userInfo = result.data;
                } else {
                    this.$message.error(result.message);
                }
            })
        },
        toggleShow() {
            this.show = !this.show;
        },
        /**
         * crop success
         *
         * [param] imgDataUrl
         * [param] field
         */
        cropSuccess(imgDataUrl, field) {
            console.log('-------- crop success --------');
            console.log(field);
            this.imgDataUrl = imgDataUrl;
        },
        /**
         * upload success
         *
         * [param] jsonData  server api return data, already json encode
         * [param] field
         */
        cropUploadSuccess(response) {
            if (response.code === success_code) {
                this.userInfo.avatar = '/portal/image/' + response.data.path;


                putUser(this.userInfo).then(result => {
                    if (result.code === success_code) {
                        // change ui state
                        this.$message.success(result.message);
                    } else {
                        // change ui state
                        this.$message.error(result.message);
                    }
                });
            } else {
                this.$message.error(response.message);
            }
        },
        /**
         * upload fail
         *
         * [param] status    server api return error status, like 500
         * [param] field
         */
        cropUploadFail(status, field) {
            console.log('-------- upload fail --------');
            console.log(status);
            console.log('field: ' + field);
        }
    },
    mounted() {
        this.getOwnInfo();
    }
}
</script>

<style scoped>

.settings-user-info {
    max-width: 500px;

}

</style>